<template>
	<view class="page">
		<!-- 订单状态 -->
		<view class="order-status">
			<view class="status">
				<text class="iconfont icon-zhuyi"></text>
				<text>{{dataInfo.status_name}}</text>
			</view>
		</view>
		<!-- 收货地址 -->
		<view class="shipping-address" v-if="dataInfo.user_pick_type==2">
			<view class="name-phone">
				<text class="iconfont icon-dingwei"></text>
				<text>{{address.address_name}}</text>
				<text>{{address.address_phone}}</text>
			</view>
			<view class="address">
				<text>{{address.address_province}}{{address.address_city}}{{address.address_area}}{{address.address_content}}</text>
			</view>
		</view>
		<view class="shequList" v-if="dataInfo.user_pick_type==1&&community_pid">
			<view class="list">
				<view class="title">社区自提</view>
				<view class="mendian flex flex-align flex-bt">
					<!-- <view class="left">
						<image src="" mode=""></image>
					</view> -->
					<view class="center">
						<view class="titles flex flex-align flex-bt" style="padding-left: 30rpx;">
							<view class="l flex flex-align"><image :src="community_pid.user_img" mode=""></image> {{community_pid.community_name}}</view>
							<view class="r">距离{{community_pid.km||0.0}}公里</view>
						</view>
						<!-- <view class="team">团长：{{community_pid.name}}</view> -->
						<view class="team" style="padding-left: 30rpx;">{{community_pid.address}}</view>
						<view class="flex flex-align" style="margin-top: 10rpx;" @click="telClick(community_pid.phone)">
							<text class="cuIcon cuIcon-phone" style="color: #f20;"></text>
							<view class="">{{community_pid.phone}}</view>
						</view>
					</view>
					<view class="right" @click="openLocation(community_pid)">
						<tui-icon name="gps" color="#999" :size="28"></tui-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单商品 -->
		<view class="order-goods">
			<view class="goods-list">
				<view class="list" v-for="(item,index) in order" :key="index">
					<view class="thumb">
						<image :src="item.goods_cover" mode=""></image>
					</view>
					<view class="item">
						<view class="title">
							<text class="one-omit">{{item.goods_name}}</text>
						</view>
						<view class="num-size">
							<text>{{item.goods_spec}}</text>
						</view>
						<view class="price" style="display: flex;justify-content: space-between;">
							<text v-if="dataInfo.goods_type!=3&&dataInfo.goods_type!=4">￥{{item.price_selling}}</text>
							<text v-if="dataInfo.goods_type==3">{{item.price_selling}} 鸡蛋</text>
							<text v-if="dataInfo.goods_type==4"> <text v-if="item.price_selling!=0">{{item.price_selling}} +</text> {{item.balance3}}积分</text>
							<text> x{{item.stock_sales}}</text>
						</view>
						<!-- <view class="order-btn">
							<view class="btn" @click="onApplyAftersales">
								<text>申请售后</text>
							</view>
						</view> -->
					</view>
				</view>
			</view>
			<!-- <view class="contact">
				<text class="iconfont icon-kefu"></text>
				<text>联系客服</text>
			</view> -->
		</view>
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="info-list">
				<view class="list">
					<view class="title">订单编号:</view>
					<view class="content">
						<text>{{dataInfo.order_no}}</text>
						<text class="btn" @click="copy(dataInfo.order_no)">复制</text>
					</view>
				</view>
				<view class="list">
					<view class="title">下单时间:</view>
					<view class="content">
						<text>{{dataInfo.create_at}}</text>
					</view>
				</view>
				<view class="list">
					<view class="title">支付方式:</view>
					<view class="content">
						<text>{{dataInfo.payment_remark}}</text>
					</view>
				</view>
				<view class="list" style="height: auto;align-items: flex-start;padding: 20rpx 0 ;" v-if="dataInfo.status==5">
					<view class="title">退款原因:</view>
					<view class="content">
						<textarea v-model="dataInfo.sale_remark" name="" placeholder-style="color:#999" style="background: #f7f7f7;height: 200rpx;padding: 20rpx;font-size: 24rpx;" placeholder="请输入退款原因"></textarea>
					</view>
				</view>
				<view class="list" style="height: auto;align-items: flex-start;padding: 20rpx 0 ;" v-if="dataInfo.status==5">
					<view class="title" >退款凭证:</view>
					<view class="content" style="width: 540rpx;">
						<view class="flex flex-line">
							<view class="imags" v-for="(item,index) in images" :key="index">
								<image :src="item" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="list" v-if="dataInfo.status!=1&&dataInfo.status!=2">
					<view class="title">配送方式:</view>
					<view class="content">
						<text>{{address.company_name}}</text>
						<text class="btn" @click="copy(address.company_name)">复制</text>
					</view>
				</view>
				<view class="list" v-if="dataInfo.status!=1&&dataInfo.status!=2">
					<view class="title">快递单号:</view>
					<view class="content">
						<text>{{address.send_number}}</text>
						<text class="btn" @click="copy(address.send_number)">复制</text>
					</view>
				</view>
				<view class="list"  v-if="dataInfo.status!=1&&dataInfo.status!=2">
					<view class="title">配送日期:</view>
					<view class="content">
						<text>{{address.send_datetime}}</text>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 订单明细 -->
		<view class="order-details">
			<view class="details-list">
				<view class="list">
					<view class="title">
						<text>商品总额</text>
					</view>
					<view class="price" v-if="dataInfo.goods_type!=3&&dataInfo.goods_type!=4">
						<text>￥{{dataInfo.amount_real}}</text>
					</view>
					<view class="price" v-if="dataInfo.goods_type==3">
						<text>{{dataInfo.amount_real}}鸡蛋</text>
					</view>
					<view class="price" v-if="dataInfo.goods_type==4">
						<text v-if="dataInfo.amount_real!=0">{{dataInfo.amount_real}}+</text><text>{{dataInfo.balance3}}积分</text>
					</view>
				</view>
				<view class="list action">
					<view class="title">
						<text>实付款：</text>
					</view>
					<view class="price" v-if="dataInfo.goods_type!=3&&dataInfo.goods_type!=4">
						<text>￥{{dataInfo.amount_real}}</text>
					</view>
					<view class="price" v-if="dataInfo.goods_type==3">
						<text>{{dataInfo.amount_real}}鸡蛋</text>
					</view>
					<view class="price" v-if="dataInfo.goods_type==4">
						<text v-if="dataInfo.amount_real!=0">{{dataInfo.amount_real}}+</text><text>{{dataInfo.balance3}}积分</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<!-- <view class="footer-btn">
			<view class="del">
				<text>删除订单</text>
			</view>
			<view class="btn">
				<text>查看发票</text>
				<text class="action">确认付款</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataInfo:'',
				order:[],
				order_no:'',
				address:'',
				community_pid:'',
				images:[],
				longitude:'',
				latitude:''
			};
		},
		onLoad(e) {
			let that = this
			this.order_no=e.order_no
			uni.getLocation({
				type: "gcj02",
				success(res) {
					console.log(res);
					that.longitude = res.longitude
					that.latitude = res.latitude
					that.getShequ()
				},
				fail(err) {
			
				}
			});
		},
		onShow() {
			this.getInfo()
		},
		methods:{
			/**
			 * 售后点击
			 */
			copy(e){
				let that = this
				uni.setClipboardData({
					data: e,
					success: function () {
						that.tui.toast('复制成功')
					}
				});
			},
			getShequ(){
				let that = this
				that.tui.request("api.auth.center/km", "POST", {longitude:that.longitude,latitude:that.latitude}, false, false, true).then((res) => {
					if (res.code == 1) {
						that.community_pid = res.data.info
					}
				}).catch((res) => {
				
				})
			},
			openLocation: function (value) {
				uni.openLocation({
					longitude: Number(value.longitude),
					latitude: Number(value.latitude),
					name: value.address_area,
					address: value.address
				})
			},
			onApplyAftersales(){
				uni.navigateTo({
					url: '/pages/AfterSaleType/AfterSaleType',
				})
			},
			getInfo() {
				let that = this
				that.tui.request("api.auth.order/orderDetail", "post", {order_no: that.order_no}, false, true, false).then((res) => {
					if (res.code == 1) {
						that.dataInfo = res.data.info
						that.order = res.data.info.order
						that.address =res.data.info.address
						// that.community_pid = res.data.info.community_info
						that.images = res.data.info.sale_image.split(',')
						
					}
			
				}).catch((res) => {
					console.log(res)
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'OrderDetails.scss';
	.shequList{margin-top: 100rpx;background: #fff;margin: -20rpx 24rpx 0;border-radius: 10rpx;
		.list{
			.title{padding:30rpx 30rpx 0;border-bottom: 1px solid #eee;padding-bottom: 20rpx;}
			.mendian{padding:0 30rpx 30rpx;margin: 30rpx 0;border-bottom: 1px solid #eee;
				.left{margin-right: 20rpx;
					image{width: 150rpx;height: 150rpx;}
				}
				.center{width:560rpx;
					.titles{
						.l{font-size: 30rpx;color: #f20;font-weight: bold;
							image{width: 60rpx;height: 60rpx;border-radius: 10rpx;margin-right: 10rpx;}
						}
						.r{color: #f20;}
					}
					.team{margin: 10rpx 0;color: #999;}
				}
			}
		}
	}
	.order-info{
		.content{
			image{width: 160rpx;height: 160rpx;margin-right: 20rpx;margin-bottom: 20rpx;}
			.imags{position: relative;
				.close{position: absolute;top: 0rpx;right: 20rpx;}
			}
		}
	}
</style>
